<template>
  <h4>首页</h4>
  <p>
    导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
  </p>

  <div>请输入正确的用户名 (测试时请输入 admin ,否则不能切换到"消息列表"页): </div>
  <input placeholder="请输入用户名" v-model="user">
  <span>当前用户名为: {{user}}</span>
</template>

<script>
import {onBeforeUnmount, ref} from 'vue'

export default {
  beforeRouteEnter(to, from) {
    console.log('+++ beforeRouteEnter 组件内守卫', 'to:', to.path, 'from:', from.path)
  },
  beforeRouteLeave(to, from) {
    console.log('+++ beforeRouteLeave 组件内守卫', 'to:', to.path, 'from:', from.path)
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    console.log('this.user', this.user)
    if (this.user === 'admin') {
      return true
    }
    alert('用户名不对,不能切换到其他页.')
    return false
  },
  beforeRouteUpdate(to, from) {
    console.log('+++ beforeRouteUpdate 组件内守卫', 'to:', to.path, 'from:', from.path)
  },
  setup() {
    let user = ref('')

    user.value = localStorage.getItem('navGuard-user')

    onBeforeUnmount(()=>{
      localStorage.setItem('navGuard-user', user.value)
    })

    return {user}
  },
}
</script>